<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-25 15:18:25
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-25 16:55:38
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\endFinancial\index.vue
 * @Description: 末端财务
-->
<template>
  <div>
      <custom-container ref="customContainerRef" :config="config" />
  </div>
</template>

<script setup lang="ts" name="EndFinancial">

import { ref, reactive, computed } from 'vue'
import { ElButton } from "element-plus"
import { terminalFinanceList } from '@/api/finance/receiverManange'
import { useRouter } from 'vue-router'
import { DictDirection } from '@/store/modules/dicts'

const router = useRouter()

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  customerCode: undefined,
  beginTime: undefined,
  endTime: undefined,
  status: undefined,
})

const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              clearable: true,
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            type:'date-picker',
            label: '订单开始时间',
            prop: 'beginTime',
            option:{
              valueFormat: 'YYYY-MM-DD',
            }
          },
          {
            type:'date-picker',
            label: '订单结束时间',
            prop: 'endTime',
            option:{
              valueFormat: 'YYYY-MM-DD',
            }
          },
          {
            type: 'select',
            label: '付款状态',
            prop: 'status',
            option: {
              clearable: true,
              dictInfo: { dict: DictDirection.付款状态 },
            },
          },
        ],
        queryParams,
        formOption: {
          labelWidth:150
        },
      },
      btns: [],
      table: {
        columns: [
          { label: '客户名称', align: 'center', prop: 'customerName' },
          { label: '应收总金额', align: 'center', prop: 'paymentAmount' },
          { label: '总票数', align: 'center', prop: 'votes' },
          { label: '总件数', align: 'center', prop: 'receivingTotal' },
          { label: '总实重', align: 'center', prop: 'receivingTotalWeight' },
          { label: '总材积重', align: 'center', prop: 'receivingTotalWood' },
          { label: '开始时间', align: 'center', prop: 'startDate' },
          { label: '结束时间', align: 'center', prop: 'endDate' },
          {
            label: '操作',
            align: 'center',
            fixed: 'right',
            render(h, {row}) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      router.push({
                         name:"EndFinancialDetail",
                         query:{
                           customerCode:row.customerCode,
                           startDate:row.startDate,
                           endDate:row.endDate,
                           status:row.status,
                         }
                      })
                    },
                  },
                  {
                    default: () => '账单详情',
                  },
                )]
            },
          },
        ],
        event: {
        },
      },
      api: terminalFinanceList,
    }
  },
  set(val) {
    return val
  },
})

</script>